<!-- src/components/TemplateCard.vue -->
<template>
  <div class="template-card" @click="$emit('click')">
    <!-- 顶部图片区域 -->
    <div class="card-image-wrapper">
      <img :src="template.imageUrl" :alt="template.name" class="card-image" />
    </div>

    <!-- 底部信息区域 -->
    <div class="card-info">
      <h4 class="template-title">{{ template.name }}</h4>
      <div class="template-rating">
        <!-- 核心逻辑：调用一个计算属性或方法来生成星级HTML -->
        <span class="stars" v-html="renderStars(template.averageRating)"></span>
        <span class="rating-value">{{
          template.averageRating ? template.averageRating.toFixed(1) : '0.0'
        }}</span>
      </div>
      <div class="template-tags">
        <!-- 示例：显示分类和主题标签 -->
        <span class="tag">{{ template.category ? template.category.name : 'N/A' }}</span>
        <span class="tag">{{ template.theme ? template.theme.name : 'N/A' }}</span>
      </div>
      <div class="template-meta">
        <!-- 作者信息 -->
        <span class="author">👤 {{ template.author ? template.author.name : '佚名' }}</span>
        <!-- 喜欢和下载数 -->
        <span class="stats">❤️ {{ template.likes || 0 }} ⬇️ {{ template.downloads || 0 }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// 接收一个名为 template 的 prop，类型为 Object
const props = defineProps({
  template: {
    type: Object,
    required: true,
  },
})

// 定义点击事件，让父组件可以监听并执行跳转
const emit = defineEmits(['click'])

const renderStars = (rating) => {
  // 确保 rating 是一个数字
  const r = parseFloat(rating) || 0

  // 计算实心星的数量 (向下取整)
  const fullStars = Math.floor(r)
  // 计算半星 (如果有 .5 或更高的小数部分)
  // 简化处理：四舍五入到最近的半星或整星，然后计算
  const halfStar = r - fullStars >= 0.5 ? 1 : 0
  // 计算空心星的数量
  const emptyStars = 5 - fullStars - halfStar

  let html = ''
  // 填充实心星 (★)
  html += '★'.repeat(fullStars)
  // 填充半星 (如果需要，可使用半星图标，这里用 ★ 的颜色变化或简单的 ☆ 占位)
  // 简单的视觉实现：使用实心星 (★) 和空心星 (☆)
  html += '☆'.repeat(emptyStars)

  // 推荐使用 CSS 伪类或专门的 Vue 评分组件来实现更精准的半星效果

  return html
}
</script>

<style scoped>
/* 样式应遵循图示中的卡片样式，使用阴影、圆角和精简布局 */
/* 确保卡片是 Grid Item，且宽度是 100% */
.template-card {
  width: 100%;
  /* ... 阴影、圆角等 ... */
}

/* 关键：图片外层容器，用于强制 1:1 比例 */
.card-image-wrapper {
  width: 100%;
  padding-top: 100%; /* 强制高度等于宽度 */
  position: relative;
  overflow: hidden; /* 裁剪掉多余的图片内容 */
}

/* 关键：图片自身，强制填充容器 */
.card-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* 关键属性：裁剪图片以覆盖整个容器，保持图片不变形 */
  object-fit: cover;
}

.template-rating {
  display: flex;
  align-items: center;
  color: #f3c623; /* 星星颜色 */
}
.rating-value {
  margin-left: 5px;
  color: #555;
}
</style>
